<!DOCTYPE html>
<html>
	<head>
		<meta charset="ISO-8859-1">
		<title>Insert title here</title>
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function($){
				
				$(".equ-tri").live("click", function(){
					
					if($(this).parent().find(".equ-inf").hasClass("selected") == true){
						
						$(this).parent().find(".equ-inf").hide();
						$(this).parent().find(".equ-inf").removeClass("selected");
						
					}else{
						
						$(this).parent().find(".equ-inf").show();
						$(this).parent().find(".equ-inf").addClass("selected");
						
					}
					
				});
				
			});
		</script>
		<style type="text/css">
			body{
				font-size: 14px;
				font-family: 'Segoe UI', Tahoma, Verdana, Arial, sans-serif;
				margin: 0px;
				padding: 0px;
			}
			.panel-area{
				border-radius: 0.5em;
				-webkit-border-radius: 0.5em;
				-moz-border-radius: 0.5em;
				-o-border-radius: 0.5em;
				-ms-border-radius: 0.5em;
				border-width: 0.2em;
				border-style: solid;
				border-color: white;
				box-shadow: 0px 0px 5px #000000;
				-webkit-box-shadow: 0px 0px 5px #000000;
				-moz-box-shadow: 0px 0px 5px #000000;
				-o-box-shadow: 0px 0px 5px #000000;
				-ms-box-shadow: 0px 0px 5px #000000;
				
				display: table;
				width: 19em;
			}
			.panel-area table{
				border-collapse: collapse;
				text-align: center;
				width: 100%;
			}
			.panel-area table, hr {
				margin: 0.5em 0em 0.8em 0em;
			}
			.equ-tri, .usu-tri{
				cursor: pointer;
				padding: 0.5em;				
			}
			.equ-inf, .usu-inf{
				display: none;
				border-radius: 0em 0em 0.5em 0.5em;
				box-shadow: inset 0px 2px 12px #363636;
				padding: 0.5em;
				
			}
			.equ-tri:hover, .usu-tri:hover{
				background-color: #FABA76;
			}
			.panel-area .panel-head{
				border-width: 0px 0px 1px 0px; 
				border-style: solid;
				border-color: white;
				padding: 0.7em;
			}
			.panel-area .panel-body{
				padding: 0.7em;
			}
			.panel-area .panel-foot{
				border-width: 1px 0px 0px 0px; 
				border-style: solid;
				border-color: white;
				padding: 0.7em;
				
			}
			/*.panel-area table tbody tr:hover{
				background-color: #93C4FC !important;
				color: black;	
			}*/
		</style>
	</head>
	<body>
		<section id="panel-14" style="background-color:#a484e0;position:absolute; margin-top: 58px; margin-left: 115px;" class="panel-area">
			<div class="panel-head">
				<p>ECSAC - TIC</p>
			</div>
			
			<div class="panel-body">
				<div>
					<table>
						<tbody>
						<tr>
							<td>Equipo</td>
							<td>Usuario</td>
						</tr>
						<tr>
							<td id="equ-1" valign="top">
								<div class="equ-tri">PC LENOVO 3000 H SERIES 301810S R36NNP4</div>
								<div class="equ-inf">
									<label>Texto informativo</label>
								</div>
							</td>
							<td id="equ-13" valign="top">
								<div class="usu-tri">CRISTIAN PERALTA HUAMAN</div>
								<div class="usu-inf">
									<label>Texto informativo</label>
								</div>
							</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>
			
			<div class="panel-foot">
				<p>
					<input id="chck-posi-panel-14" name="chck-posi-panel-14" type="checkbox">
					<label for="chck-posi-panel-14">Organizar bloques</label>
				</p>
				<p>
					<span id="area-picker-panel-14" class="area-picker">Personalizar color</span>
				</p>
			</div>
		</section>
	
	</body>
</html>